<template>
  <div class="zhu">
    <div class="content">
      <!-- 左栏 -->
      <div class="left">
        <div class="left-con">
          <div class="c-con">
            <div class="c-biao">
              <ul class="l-biao" style="background-color: rgb(48, 65, 86);">
                <li
                  class="el-menu-item"
                  style="
                    padding-left: 20px;
                    color: rgb(64, 158, 255);
                    background-color: rgb(48, 65, 86);
                  "
                >
                  <div
                    class="el-tooltip"
                    style="
                      position: absolute;
                      left: 0px;
                      top: 0px;
                      height: 100%;
                      width: 100%;
                      display: inline-block;
                      box-sizing: border-box;
                      padding: 0px 20px;
                    "
                  >
                    <svg class="svg-icon">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 128 100"
                        id="icon-dashboard"
                      >
                        <path
                          d="M27.429 63.638c0-2.508-.893-4.65-2.679-6.424-1.786-1.775-3.94-2.662-6.464-2.662-2.524 0-4.679.887-6.465 2.662-1.785 1.774-2.678 3.916-2.678 6.424 0 2.508.893 4.65 2.678 6.424 1.786 1.775 3.94 2.662 6.465 2.662 2.524 0 4.678-.887 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zm13.714-31.801c0-2.508-.893-4.65-2.679-6.424-1.785-1.775-3.94-2.662-6.464-2.662-2.524 0-4.679.887-6.464 2.662-1.786 1.774-2.679 3.916-2.679 6.424 0 2.508.893 4.65 2.679 6.424 1.785 1.774 3.94 2.662 6.464 2.662 2.524 0 4.679-.888 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zM71.714 65.98l7.215-27.116c.285-1.23.107-2.378-.536-3.443-.643-1.064-1.56-1.762-2.75-2.094-1.19-.33-2.333-.177-3.429.462-1.095.639-1.81 1.573-2.143 2.804l-7.214 27.116c-2.857.237-5.405 1.266-7.643 3.088-2.238 1.822-3.738 4.152-4.5 6.992-.952 3.644-.476 7.098 1.429 10.364 1.905 3.265 4.69 5.37 8.357 6.317 3.667.947 7.143.474 10.429-1.42 3.285-1.892 5.404-4.66 6.357-8.305.762-2.84.619-5.607-.429-8.305-1.047-2.697-2.762-4.85-5.143-6.46zm47.143-2.342c0-2.508-.893-4.65-2.678-6.424-1.786-1.775-3.94-2.662-6.465-2.662-2.524 0-4.678.887-6.464 2.662-1.786 1.774-2.679 3.916-2.679 6.424 0 2.508.893 4.65 2.679 6.424 1.786 1.775 3.94 2.662 6.464 2.662 2.524 0 4.679-.887 6.465-2.662 1.785-1.775 2.678-3.916 2.678-6.424zm-45.714-45.43c0-2.509-.893-4.65-2.679-6.425C68.68 10.01 66.524 9.122 64 9.122c-2.524 0-4.679.887-6.464 2.661-1.786 1.775-2.679 3.916-2.679 6.425 0 2.508.893 4.65 2.679 6.424 1.785 1.774 3.94 2.662 6.464 2.662 2.524 0 4.679-.888 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zm32 13.629c0-2.508-.893-4.65-2.679-6.424-1.785-1.775-3.94-2.662-6.464-2.662-2.524 0-4.679.887-6.464 2.662-1.786 1.774-2.679 3.916-2.679 6.424 0 2.508.893 4.65 2.679 6.424 1.785 1.774 3.94 2.662 6.464 2.662 2.524 0 4.679-.888 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zM128 63.638c0 12.351-3.357 23.78-10.071 34.286-.905 1.372-2.19 2.058-3.858 2.058H13.93c-1.667 0-2.953-.686-3.858-2.058C3.357 87.465 0 76.037 0 63.638c0-8.613 1.69-16.847 5.071-24.703C8.452 31.08 13 24.312 18.714 18.634c5.715-5.68 12.524-10.199 20.429-13.559C47.048 1.715 55.333.035 64 .035c8.667 0 16.952 1.68 24.857 5.04 7.905 3.36 14.714 7.88 20.429 13.559 5.714 5.678 10.262 12.446 13.643 20.301 3.38 7.856 5.071 16.09 5.071 24.703z"
                        ></path>
                      </svg>
                    </svg>
                  </div>
                </li>
                <li
                  class="el-menu-item"
                  style="
                    padding-left: 20px;
                    color: rgb(191, 203, 217);
                    background-color: rgb(48, 65, 86);
                  "
                >
                  <div
                    class="el-tooltip"
                    style="
                      position: absolute;
                      left: 0px;
                      top: 0px;
                      height: 100%;
                      width: 100%;
                      display: inline-block;
                      box-sizing: border-box;
                      padding: 0px 20px;
                    "
                  >
                    <svg class="svg-icon" data-v-18eeea00="">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 128 128"
                        id="icon-link"
                      >
                        <path
                          d="M115.625 127.937H.063V12.375h57.781v12.374H12.438v90.813h90.813V70.156h12.374z"
                        ></path>
                        <path
                          d="M116.426 2.821l8.753 8.753-56.734 56.734-8.753-8.745z"
                        ></path>
                        <path
                          d="M127.893 37.982h-12.375V12.375H88.706V0h39.187z"
                        ></path>
                      </svg>
                    </svg>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <!-- 内容 -->
      <div class="cen">
        <div class="cen-top">
          <div class="navbar">
            <div class="nav-biao" style="padding: 0px 15px;">
              <svg
                data-v-49e15297=""
                viewBox="0 0 1024 1024"
                xmlns="http://www.w3.org/2000/svg"
                width="64"
                height="64"
                class="n-biao"
              >
                <path
                  data-v-49e15297=""
                  d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"
                ></path>
              </svg>
            </div>
            <div class="tai">
              <span class="tai-q">
                <span data-v-69515898="" class="tai-n">控制台</span>
              </span>
            </div>
            <div class="you-nei">
              <div class="right-menu-item">
                <svg
                  class="svg-icon"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 128 128"
                  id="icon-fullscreen"
                >
                  <path
                    d="M38.47 52L52 38.462l-23.648-23.67L43.209 0H.035L0 43.137l14.757-14.865L38.47 52zm74.773 47.726L89.526 76 76 89.536l23.648 23.672L84.795 128h43.174L128 84.863l-14.757 14.863zM89.538 52l23.668-23.648L128 43.207V.038L84.866 0 99.73 14.76 76 38.472 89.538 52zM38.46 76L14.792 99.651 0 84.794v43.173l43.137.033-14.865-14.757L52 89.53 38.46 76z"
                  ></path>
                </svg>
              </div>
              <div class="right-menu-item">
                <svg
                  class="svg-icon"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 128 128"
                  id="icon-size"
                >
                  <path
                    d="M0 54.857h54.796v18.286H36.531V128H18.265V73.143H0V54.857zm127.857-36.571H91.935V128H72.456V18.286H36.534V0h91.326l-.003 18.286z"
                  ></path>
                </svg>
              </div>
              <div class="right-menu-item">
                <div class="tu">
                  <img
                    class="user-avatar"
                    src=""
                  />
                  <img
                    class="jiao"
                    src="https://qn.cache.wpscdn.cn/encs/wpscn/images/footer/down.591ade5e.png"
                    alt=""
                  />
                </div>
              </div>
            </div>
          </div>
          <div class="xia">
            <div class="xia-x">
              <span class="dian-kz">控制台</span>
            </div>
          </div>
        </div>
        <div class="z-con">
          <div class="shuju">
            <a
              data-v-17430afe=""
              data-v-f658dbd2=""
              href="https://gitee.com/websong"
              target="_blank"
              aria-label="View source on Github"
              class="github-corner"
              style="position: absolute; top: 0px; border: 0px; right: 0px;"
            >
              <svg
                data-v-17430afe=""
                width="80"
                height="80"
                viewBox="0 0 250 250"
                aria-hidden="true"
                style="fill: rgb(64, 201, 198); color: rgb(255, 255, 255);"
              >
                <path
                  data-v-17430afe=""
                  d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"
                ></path>
                <path
                  data-v-17430afe=""
                  d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
                  fill="currentColor"
                  class="octo-arm"
                  style="transform-origin: 130px 106px;"
                ></path>
                <path
                  data-v-17430afe=""
                  d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
                  fill="currentColor"
                  class="octo-body"
                ></path>
              </svg>
            </a>
            <div class="title">
              <h3>web2008班，第6周期，共23人，老师：宋老师</h3>
            </div>
            <div>
              <template>
                <el-input
                  @input="sou(search)"
                  style="width: 1250px;"
                  v-model="search"
                  placeholder="输入名字查询"
                ></el-input>
                <el-button style="width: calc(100% - 1250px);" type="button">
                  等级说明
                </el-button>
              </template>
              <el-table border :data="tableData" :row-class-name="rowstyle">
                <el-table-column label="" prop="" type="expand">
                  <template slot-scope="props">
                    <el-table :data="props.row.dateArr" style="width: 100%;">
                      <el-table-column
                        prop="date"
                        label="日期"
                      ></el-table-column>
                      <el-table-column
                        prop="grade"
                        label="分数"
                      ></el-table-column>
                      <el-table-column
                        prop="remark"
                        label="情况"
                      ></el-table-column>
                    </el-table>
                  </template>
                </el-table-column>

                <el-table-column label="姓名" prop="name"></el-table-column>
                <el-table-column
                  label="总分"
                  prop="totalScore"
                ></el-table-column>
                <el-table-column
                  label="平均分"
                  prop="average"
                ></el-table-column>
                <el-table-column label="等级" prop="grade"></el-table-column>
                <el-table-column label="情况" prop="remarks"></el-table-column>
                <el-table-column align="right"></el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import list from './作业数据.json'
export default {
  data() {
    return {
      search: '',
      tableData: list,
    }
  },
  methods: {
    rowstyle({ row }) {
      if (row.sid == '20000414') {
        return 'active'
      } else {
        return ''
      }
    },
    //搜索
    sou(val) {
      this.tableData = list.filter((a) => {
        return a.name.indexOf(val) !== -1
      })
    },
    updated() {
      if (this.search === '') {
        this.tableData = list
      }
    },
  },
}
</script>

<style lang="scss">
* {
  margin: 0px;
  padding: 0px;
  box-sizing: inherit;
}

.zhu {
  height: 100%;
  .content {
    position: relative;
    height: 100%;
    width: 100%;
    // 左栏
    .left {
      width: 54px !important;
      background-color: #304156;
      height: 100%;
      position: fixed;
      font-size: 0;
      top: 0;
      bottom: 0;
      left: 0;
      z-index: 1001;
      overflow: hidden;
      .left-con {
        height: 100%;
        position: relative;
        .c-con {
          margin-bottom: -17px;
          margin-right: -17px;
          overflow-x: hidden !important;
          .c-biao {
            box-sizing: inherit;
            .l-biao {
              border: none;
              height: 100%;
              width: 100% !important;
              list-style: none;
              position: relative;
              margin: 0;
              padding-left: 0;
              .el-menu-item {
                padding: 0 !important;
                position: relative;
                .el-tooltip {
                  padding: 0 !important;
                  .svg-icon {
                    margin-left: 20px;
                    margin-right: 16px;
                    width: 1em;
                    height: 1em;
                    vertical-align: -0.15em;
                    fill: currentColor;
                    overflow: hidden;
                  }
                }
              }
            }
          }
        }
      }
    }
    //内容
    .cen {
      margin-left: 54px;
      min-height: 100%;
      .cen-top {
        box-sizing: inherit;
        .navbar {
          height: 50px;
          overflow: hidden;
          background: #fff;
          box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
          .nav-biao {
            line-height: 46px;
            height: 100%;
            float: left;
            cursor: pointer;
            .n-biao {
              display: inline-block;
              vertical-align: middle;
              width: 20px;
              height: 20px;
            }
          }
          .tai {
            float: left;
            font-size: 14px;
            line-height: 50px;
            margin-left: 8px;
            .tai-q {
              .tai-n {
                color: #97a8be;
                cursor: text;
              }
            }
          }
          .you-nei {
            float: right;
            height: 100%;
            line-height: 50px;
            .right-menu-item {
              display: inline-block;
              padding: 0 8px;
              height: 100%;
              font-size: 18px;
              color: #5a5e66;
              vertical-align: text-bottom;
              .svg-icon {
                width: 1em;
                height: 1em;
                vertical-align: -0.15em;
                fill: currentColor;
                overflow: hidden;
              }
              .tu {
                margin-top: 5px;
                .user-avatar {
                  cursor: pointer;
                  width: 40px;
                  height: 40px;
                  border-radius: 10px;
                  margin-right: 5px;
                }
                .jiao {
                  cursor: pointer;
                  width: 12px;
                  height: 12px;
                  margin-left: 5px;
                }
              }
            }
          }
        }
        .navbar:after {
          content: '';
          display: block;
          clear: both;
        }
        .xia {
          height: 34px;
          width: 100%;
          background: #fff;
          border-bottom: 1px solid #d8dce5;
          box-shadow: 0 1px 3px 0 rgb(0 0 0 / 12%), 0 0 3px 0 rgb(0 0 0 / 4%);
          .xia-x {
            margin-bottom: -17px;
            margin-right: -17px;
            height: 49px;
            .dian-kz {
              background-color: #42b983;
              color: #fff;
              border-color: #42b983;
              margin-right: 15px;
              margin-left: 15px;
              padding: 0 8px;
              font-size: 12px;
              margin-top: 4px;
              display: inline-block;
              cursor: pointer;
              height: 26px;
              line-height: 26px;
              border: 1px solid #d8dce5;
            }
            .dian-kz:before {
              content: '';
              background: #fff;
              display: inline-block;
              width: 8px;
              height: 8px;
              border-radius: 50%;
              position: relative;
              margin-right: 2px;
            }
          }
        }
      }
      .z-con {
        width: 100%;
        min-height: 100vh;
        position: relative;
        overflow: hidden;
        .shuju {
          padding: 0 60px 0 60px;
        }
        .title {
          text-align: center;
          color: grey;
          padding-top: 19px;
          padding-bottom: 19px;
        }
      }
    }
  }
}
.el-table .active {
  background: #ff0;
  color: red;
}
</style>
